<template>
  <div class="container enroll">
    <!-- tab页 -->
    <van-tabs
      v-model="active"
      swipeable
      sticky
      animated
      title-active-color="#ee732f"
      :ellipsis="false"
      color="#ee732f"
      @change="onChange"
    >
      <van-tab
        v-for="(channel,index) in channellist"
        :key="index"
        :title="channel.title"
        :name="channel.id"
      >
        <recommend
          key="recommend"
          :list="channel.datalist"
        />
      </van-tab>
    </van-tabs>
    <div
      class="bbs-publish"
      @click="pushNativelink('/pages/publish/main')"
    >
      <!-- <van-icon class="bbs-publish-icon" name="plus" /> -->
      发布
    </div>
  </div>
</template>

<script>
import Recommend from '@/components/home/recommend'
export default {
  components: {
    Recommend
  },

  data () {
    return {
      active: 1,
      channellist: [
        {
          id: '1',
          title: '全部帖子',
          icon: '/static/images/saicheng_1.jpg',
          mplink: '/pages/teambook/management/main',
          datalist: [
            {
              id: 1,
              title: '12年前发明“熊猫烧香”病毒的网络天才，坐4年牢后，现状如何？',
              description: '微观影1视 1小时前 102评论',
              format: 'bbs',
              medias: [
                {
                  path: 'http://oss.youmbe.com/attachments/temp/01.jpg',
                  format: 'video'
                }
              ]
            },
            {
              id: 2,
              title: '济南东部房价“喋喋不休”，西部房价依然坚挺，为何？',
              description: '济南楼市 1小时前 102评论',
              format: 'bbs',
              medias: [
                {
                  path: 'http://oss.youmbe.com/attachments/temp/02.jpg',
                  format: 'video'
                }
              ]
            }
          ]
        },
        {
          id: '2',
          title: '精选帖子',
          icon: '/static/images/saicheng_1.png',
          mplink: '/pages/teambook/intrant/main',
          datalist: [
            {
              id: 3,
              title: '心寒！市民主动清理黑衣人设置的路障 被暴徒用重器猛击头部',
              description: '环球网国内 7小时前 21评论',
              format: 'bbs',
              medias: []
            },
            {
              id: 4,
              title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
              description: '中关村在线 12-01 05:27 21评论',
              format: 'bbs',
              medias: [
                {
                  path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
                  format: 'image'
                }
              ]
            },
            {
              id: 5,
              title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
              description: '中关村在线 12-01 05:27 21评论',
              format: 'bbs',
              medias: [
                {
                  path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
                  format: 'image'
                }
              ]
            },
            {
              id: 6,
              title: '国庆七十周年阅兵 显国威、振军威',
              description: '凤凰网 10-01 10:27 12,321评论',
              format: 'bbs',
              medias: [
                {
                  path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
                  format: 'image'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  onShow () {
  },
  methods: {
    onChange (e) {
      console.log(e)
    }
  }
}
</script>

<style lang="less">
.tab-image {
  width: 100%;
}
.bbs-publish {
  width: 60px;
  height: 60px;
  border-radius: 60px;
  background-color: #ee732f;
  position: absolute;
  right: 5%;
  bottom: 5%;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 14px;
}
</style>
